<!--
 * @Description: 运营分析
 * @Author: py
 * @Date: 2024-10-31
-->
<script setup lang='ts'>
import type { EChartsOption } from 'echarts'

import { useDealAnalysis, useOperation } from '@fl/api/data-analysis'
import { Echart } from '@fl/origin-components/Echart'
import { set } from 'lodash-es'
import { useRouter } from 'vue-router'

import type { DateRange } from '../types'

import barImg from '../images/img_bar.png'
import blueLineImg from '../images/img_line_blue.png'
import redLineImg from '../images/img_line_red.png'

const router = useRouter()

const oDateRange = inject<Ref<DateRange>>('dateRange', ref({ endTime: '', startTime: '' }))
if (!oDateRange) {
    throw new Error('dateRange is not provided by an ancestor component.')
}

const { data: oResData } = useOperation(oDateRange)

const signTotalArea = computed(() => {
    const judgeVal = oResData.value?.onlineSignArea
    if (judgeVal === null) {
        return '--'
    }
    else {
        return judgeVal > 10000 ? (judgeVal / 10000).toFixed(2) : judgeVal
    }
})
const signAmount = computed(() => {
    const judgeVal = oResData.value?.onlineSignMoney
    if (judgeVal === null) {
        return '--'
    }
    else {
        // (Math.trunc(judgeVal * 100) / 100).toFixed(2)
        return judgeVal > 100000000 ? (judgeVal / 100000000).toFixed(2) : judgeVal
    }
})
const subsidyAmount = computed(() => {
    const judgeVal = oResData.value?.subsidyMoney
    if (judgeVal === null) {
        return '--'
    }
    else {
        return judgeVal > 10000 ? (judgeVal / 10000).toFixed(2) : judgeVal
    }
})

const onlineSignParams = computed(() => {
    return {
        endTime: oDateRange.value.endTime,
        startTime: oDateRange.value.startTime,
        type: 6, // 6: 网签; 7: 面积; 8: 户型;
    }
})

const chartOptions = reactive({
    color: ['#507AFC', '#FAC858', '#93BEFF'],
    grid: {
        bottom: 0,
        // containLabel: true,
        left: 0,
        right: 0,
        top: 0,
    },
    legend: {
        align: 'left',
        bottom: 6,
        itemGap: 4,
        itemHeight: 8,
        itemWidth: 8,
        left: 'right',
        orient: 'vertical',
        textStyle: {
            color: '#4e5969',
            fontSize: 10,
            lineHeight: 14,
        },
    },
    series: [
        {
            center: ['35%', '50%'],
            data: [],
            label: {
                // alignTo: 'labelLine',
                bleedMargin: 0,
                distanceToLabelLine: 2,
                formatter: '{valueStyle|{c}}',
                rich: {
                    valueStyle: {
                        color: '#1d2129',
                        fontSize: 10,
                    },
                },
                show: true,
            },
            labelLine: {
                length: 5,
                length2: 0,
                show: false,
            },
            radius: ['43%', '60%'],
            startAngle: 0,
            type: 'pie',
        },
    ],
    // tooltip: {
    //     trigger: 'item'
    // },
}) as EChartsOption

const { data: chartsData, isLoading: chartsLoading } = useDealAnalysis(onlineSignParams)

watchEffect(() => {
    if (chartsData.value) {
        set(
            chartOptions,
            'series[0].data',
            chartsData.value.seriesData,
        )
    }
})

function toGetCouponDetails(type) {
    router.push(`/data-analysis/coupon-statistics?startDate=${oDateRange.value.startTime}&endDate=${oDateRange.value.endTime}&type=${type}`)
}
</script>

<template>
    <div class="module-panel">
        <h5 class="module-title">
            运营分析
        </h5>

        <!-- <div class="nav-box">
            <span class="btn-label">查看明细</span>

            <el-icon class="cursor-pointer"
                     color="#da0004"
            >
                <ArrowRight />
            </el-icon>
        </div> -->

        <div class="dimen-list">
            <div class="dimen-item red">
                <p class="dimen-title">
                    访问总人次
                </p>

                <div class="dimen-content">
                    <span class="dimen-value">{{ oResData?.userVisitor }}</span>

                    <img class="dimen-chart"
                         :src="redLineImg"
                         alt=""
                    >
                </div>
            </div>

            <div class="dimen-item green">
                <p class="dimen-title">
                    领券人数
                </p>

                <div class="dimen-content">
                    <span class="dimen-value link"
                          @click="toGetCouponDetails('receive')"
                    >{{ oResData?.userCoupon }}</span>

                    <img class="dimen-chart"
                         :src="barImg"
                         alt=""
                    >
                </div>
            </div>

            <div class="dimen-item blue">
                <p class="dimen-title">
                    核销人数
                </p>

                <div class="dimen-content">
                    <span class="dimen-value link"
                          @click="toGetCouponDetails('writeOff')"
                    >{{ oResData?.userExchange }}</span>

                    <img class="dimen-chart"
                         :src="blueLineImg"
                         alt=""
                    >
                </div>
            </div>

            <div class="dimen-item purple wqts">
                <p class="dimen-title">
                    网签套数
                </p>

                <div class="dimen-content">
                    <span class="dimen-value link"
                          @click="toGetCouponDetails('writeOff')"
                    >{{ oResData?.userOnlineHouse }}</span>

                    <div class="dimen-chart">
                        <ElSkeleton :loading="chartsLoading"
                                    :rows="1"
                                    animated
                        >
                            <Echart :options="chartOptions"
                                    :height="92"
                            />
                        </ElSkeleton>
                    </div>
                </div>
            </div>

            <div class="dimen-item red">
                <p class="dimen-title">
                    补贴申请总人数（线上+线下）
                </p>

                <div class="dimen-content">
                    <span class="dimen-value">{{ oResData?.subsidyApprove }}</span>

                    <img class="dimen-chart"
                         :src="redLineImg"
                         alt=""
                    >
                </div>
            </div>

            <div class="dimen-item green">
                <p class="dimen-title">
                    网签面积（{{ oResData?.onlineSignArea > 10000 ? '万' : '' }}平方米）
                </p>

                <div class="dimen-content">
                    <span class="dimen-value">{{ signTotalArea }}</span>

                    <img class="dimen-chart"
                         :src="barImg"
                         alt=""
                    >
                </div>
            </div>

            <div class="dimen-item green">
                <p class="dimen-title">
                    网签总金额（{{ oResData?.onlineSignMoney > 100000000 ? '亿' : '' }}元）
                </p>

                <div class="dimen-content">
                    <span class="dimen-value">{{ signAmount }}</span>

                    <img class="dimen-chart"
                         :src="barImg"
                         alt=""
                    >
                </div>
            </div>

            <div class="dimen-item green">
                <p class="dimen-title">
                    补贴总金额（{{ oResData?.subsidyMoney > 10000 ? '万' : '' }}元）
                </p>

                <div class="dimen-content">
                    <span class="dimen-value">{{ subsidyAmount }}</span>

                    <img class="dimen-chart"
                         :src="barImg"
                         alt=""
                    >
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
@import '../panel.less';

.module-panel {
    position: relative;

    .nav-box {
        position: absolute;
        top: 20px;
        right: 20px;
        display: inline-flex;
        align-items: center;

        .btn-label {
            font-size: 14px;
            line-height: 20px;
            color: #da0004;
            margin-right: 10px;
        }
    }
}

.dimen-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;

    .dimen-item {
        padding: 12px;
        border-radius: 8px;

        .dimen-title {
            font-size: 14px;
            line-height: 20px;
            color: #1d2129;
            margin-bottom: 20px;
        }

        .dimen-content {
            display: flex;
            justify-content: space-between;

            .dimen-value {
                display: block;
                padding-top: 8px;
                font-size: 20px;
                font-weight: 600;
                line-height: 32px;
                color: #1d2129;
            }

            .link {
                cursor: pointer;

                &:hover {
                    text-decoration: underline;
                }
            }

            .dimen-chart {
                width: 62%;
                // min-width: 110px;
                height: 60px;
            }
        }

        &.red {
            background: linear-gradient(180deg, #ffeff3 0%, #fcfafa 100%);
        }

        &.green {
            background: linear-gradient(180deg, #effee7 0%, #f9fcf7 100%);
        }

        &.blue {
            background: linear-gradient(180deg, #eef7fe 0%, #f5fbff 100%);
        }

        &.purple {
            background: linear-gradient(180deg, #f8eeff 0%, #fcf7ff 100%);
        }
    }

    .dimen-item.wqts {
        padding-bottom: 0;

        .dimen-title {
            margin-bottom: unset;
        }

        .dimen-content {
            .dimen-value {
                padding-top: 28px;
            }

            .dimen-chart {
                width: 62%;
                // min-width: 110px;
                height: 92px;
            }
        }
    }
}
</style>
